import React, { ReactElement, useEffect } from 'react';

import Provider from './reducer';
import Notch, { NotchType } from '../../components/Notch';

import styles from './style';
import List from './components/List';
import { inAppPurchaseModule } from '../../util/native';
import { coinHistory, getCoinList } from './actions';
import NavBar from '../../components/NavBar';

export default (): ReactElement => {
  useEffect((): (() => void) => {
    getCoinList();

    return (): void => {
      inAppPurchaseModule.cancelBuy();
    };
  }, []);
  return (
    <Provider>
      <Notch style={styles.container} type={NotchType.Top}>
        <NavBar
          title="蜜蜂币充值"
          rightAction={coinHistory}
          rightText="充值记录"
          rightStyle={styles.history}
        />
        <List />
      </Notch>
    </Provider>
  );
};
